<template>
	<!-- 部门列表 -->
	<div class="content">
		<div class="content-top">
			部门管理_部门查询
		</div>
		<el-row>
			<el-col :span="4">
				<div class="dep-tree">
					<el-tree :data="data" :props="defaultProps" node-key="id" :default-expanded-keys="opendata" @node-click="handleNodeClick">
					</el-tree>
				</div>
			</el-col>
			<el-col :span="20">
				<div class="content-operation">
					<el-button type="primary" icon="el-icon-plus" @click='is_add = true' v-if="has_add">添加部门</el-button>
				</div>
				<div class="content-search">
					<el-form :inline="true" class="demo-form-inline" style="margin-top: 20px;">
						<el-form-item label="部门编码">
							<el-input v-model="dept_id" placeholder="部门编码" clearable></el-input>
						</el-form-item>
						<el-form-item label="部门名称">
							<el-input v-model="dept_name" placeholder="部门名称" clearable></el-input>
						</el-form-item>
						<el-form-item label="部门类型">
							<el-select v-model="dept_type" clearable placeholder="请选择">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-button type="primary" @click='search' icon="el-icon-search">搜索</el-button>
						</el-form-item>
					</el-form>
				</div>
				<div class="content-table">
					<el-table :data="tableData" show-header stripe style="width: 100%;">
						<el-table-column prop="deptName" label="部门名称" width="200">
						</el-table-column>
						<el-table-column prop="deptCode" label="部门编码" width="200">
						</el-table-column>
						<el-table-column prop="parentName" label="上级部门" width="200">
						</el-table-column>
						<el-table-column prop="type" label="部门类别" width="200">
							<template slot-scope="scope">
								<span v-if="scope.row.type == item.value" v-for='item in options'>{{item.label}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="createDate" label="创建时间" width="200">
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button @click="handleClick(scope.row)" v-if="has_edit" type="text" size="small"><i class="el-icon-edit"></i></el-button>
								<el-button @click="handleClick1(scope.row)" v-if="has_del" type="text" size="small"><i class="el-icon-delete"></i></el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="content-page">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page"
					 :page-size=limit layout="prev, pager, next, jumper" :total=total>
					</el-pagination>
				</div>
			</el-col>
		</el-row>
		<template v-if="is_add">
			<div class="all-screen"></div>
			<div class='add-box'>
				<DepAdd @saveAdd='saveAdd'></DepAdd>
			</div>
		</template>
		<template v-if="is_edit">
			<div class="all-screen"></div>
			<div class='add-box'>
				<DepEdit @saveEdit='saveEdit' :id='id'></DepEdit>
			</div>
		</template>
	</div>
</template>

<script>
	import DepAdd from '@/components/dep/DepAdd.vue'
	import DepEdit from '@/components/dep/DepEdit.vue'
	import Global from '@/components/Global.vue'
	let _this;
	export default {
		components: {
			DepAdd: DepAdd,
			DepEdit: DepEdit,
		},
		props: ['power'],
		data() {
			return {
				options: [{
					value: '0',
					label: '一般部门'
				}, {
					value: '1',
					label: '换电站'
				}, {
					value: '3',
					label: '外部部门'
				}],
				value: '',
				id: 'id',
				is_add: false,
				is_edit: false,
				tableData: [],
				limit: 10,
				page: 1,
				total: 1,
				dept_id: '',
				dept_name: '',
				dept_type: '',
				opendata: [],
				data: [],
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				has_add: false,
				has_edit: false,
				has_del: false,
			}
		},
		created() {
			_this = this;
		},
		mounted() {
			this.check_power();
			this.get_list();
			this.get_tree();
		},
		methods: {
			check_power() {
				this.power.forEach(function(element) {
					if (element.permissionName.indexOf("添加") != -1) _this.has_add = true;
					if (element.permissionName.indexOf("编辑") != -1) _this.has_edit = true;
					if (element.permissionName.indexOf("删除") != -1) _this.has_del = true;
				});
			},
			get_tree() {
				this.$axios.get(this.$global.serverIp + 'admin/sysDept/findTree')
					.then(function(res) {
						if (res != '')
							_this.data = _this.change_data(res.data);
					})
			},
			change_data(list) {
				var data = [];
				var length = list.length;
				for (var i = 0; i < length; i++) {
					var e = {};
					var s_length = list[i].children.length;
					if (s_length > 0) {
						e.children = this.change_data(list[i].children);
					}
					e.id = list[i].id;
					e.label = list[i].deptName;
					data.push(e);
					this.opendata.push(list[i].id);
				}
				return data;
			},
			search() {
				this.page = 1;
				this.get_list();
			},
			handleNodeClick(data) {
				this.dept_name = data.label;
				this.get_list();
			},
			get_list() {
				this.$axios.post(this.$global.serverIp + 'admin/sysDept/findPage', {
						"limit": _this.limit + "",
						"page": _this.page + "",
						"deptName": _this.dept_name,
						"deptCode": _this.dept_id,
						"type": _this.dept_type,
					})
					.then(function(res) {
						if (res != '') {
							_this.tableData = res.data.list;
							_this.total = res.data.totalCount;
							_this.page = res.data.currPage;
						}

					})

			},
			saveAdd(type) {
				if (type == 2) {
					this.get_list();
					this.get_tree();
				}
				this.is_add = false;
			},

			saveEdit(type) {
				if (type == 2) {
					this.get_list();
					this.get_tree();
				}
				this.is_edit = false;
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.page = val;
				this.get_list();
				console.log(`当前页: ${val}`);
			},
			handleClick(row) {
				this.id = row.id;
				this.is_edit = true;
			},
			handleClick1(row) {
				this.delopen(row);
			},
			delopen(row) {
				this.$confirm('此操作将删除该部门, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					$.ajax({
						url: Global.serverIp + 'jianeng-admin/sysDept/delete',
						data: '["' + row.id + '"]',
						xhrFields: {
							withCredentials: true
						},
						beforeSend: function(request) {
							request.setRequestHeader("Authorization", 'Bearer ' + localStorage.getItem('token'));
						},
						contentType: 'application/json;charset=utf-8',
						dataType: 'json',
						type: 'delete',
						success: function(res) {
							if (res.code == Global.success_code) {
								_this.$popup.open("删除成功");
								_this.get_list();
								_this.get_tree();
							} else {
								_this.$popup.open(res.msg);
							}
						},
						error: function(res) {
							if (res.responseJSON.code == '040005') {
								_this.$popup.open("登录过期");
							} else {
								_this.$popup.open("请求失败");
							}
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		},

	}
	import '@/assets/css/common.css'
</script>
